<template>
  <div class="_wrap">
    <table-scroll-pro :data="tableData" :columns="columns" :config="config" :class-option="classOption">
      <template slot="index" slot-scope="{scope, row, data}">
        <span>{{ scope.$index<=2?'TOP ':'' }}{{ scope.$index+1 }}</span>
      </template>
      <template slot="ratio" slot-scope="{scope, row, data}">
        <span style="color: #fff">{{ data }}</span>
      </template>
    </table-scroll-pro>
  </div>
</template>

<script>
  export default {
    name: 'itemRight3',
    components: {},
    data() {
      return {
        tableData: [],
        columns: [
          { label: '排名', slot: 'index', minWidth: 50, showOverflowTooltip: true, align: 'center' },
          { label: '', prop: '', minWidth: 42 },
          { label: '高校名称', prop: 'itemName', minWidth: 146, showOverflowTooltip: true, align: 'left' },
          { label: '人数', prop: 'num', align: 'center' },
          { label: '占比', slot: 'ratio', align: 'center' }
        ],
        classOption: {
          // autoPlay: false,
          limitMoveNum: 4, // 开始滚动的数量
          singleHeight: 36, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
          waitTime: 2000, // 单步停止等待时间(默认值1000ms)
        },
        config: {
          rowHeight: 34 + 'px',
          headerHeight: 36 + 'px',
          headerBGC: 'transparent',
          headerCellStyle: {
            fontSize: '16px',
            color: '#64A6FF',
            fontWeight: 'normal'
          },
          cellStyle: {
            color: '#769EBF',
          },
          rowBGC: 'rgba(100, 166, 255, .06)',
          stripeBGC: 'rgba(100, 166, 255, .01)'
        }
      }
    },
    mounted() {
      this.tableData = [
        { itemName: '某某某某某大学', num: '00,000', ratio: '00.00%' },
        { itemName: '某某某某某大学', num: '00,000', ratio: '00.00%' },
        { itemName: '某某某某某大学', num: '00,000', ratio: '00.00%' },
        { itemName: '某某某某某大学', num: '00,000', ratio: '00.00%' },
        { itemName: '某某某某某大学', num: '00,000', ratio: '00.00%' },
        { itemName: '某某某某某大学', num: '00,000', ratio: '00.00%' },
        { itemName: '某某某某某大学', num: '00,000', ratio: '00.00%' },
        { itemName: '某某某某某大学', num: '00,000', ratio: '00.00%' },
      ]
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  ._wrap {
    height: 180px !important;
  }
</style>
